<!--  -->
<template>
  <div class="dialog-editor-setMore" v-if="dialogShow">
    <SetDesignDialog :title="'设置'" :dialogVisible="dialogShow" :close="close" :saveclose="saveclose" :hasfooter="false"  ref="settingSetMoreDialog">
      <div class="dlg-main-box setMore-set">
        <el-tabs v-model="activeName">
          <el-tab-pane label="基础设置" name="1">
            <div class="content-set-u">
              <div class="set-item-u">
                <div class="tit-u">常用组件</div>
                <div class="content-u">
                  <div class="content-item">
                    <ServiceSet ref="serviceSet"/>
                    <MenufootfixedSet ref="menufootfixedSet"/>
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="站点复制" name="2" v-if="currentSite && currentSite.list.length > 1">
            <SiteCopy/>
          </el-tab-pane>
        </el-tabs>
      </div>
    </SetDesignDialog>
  </div>
</template>

<script>
import SetDesignDialog from '@/components/common/dialog/SetDesignDialog.vue'
import ServiceSet from '@/components/common/design/dialog/basicSet/ServiceSet.vue'
import MenufootfixedSet from '@/components/common/design/dialog/basicSet/MenufootfixedSet.vue'
import SiteCopy from '@/components/common/design/dialog/siteCopy/SiteCopy.vue'
import { mapGetters } from 'vuex'
export default {
  computed: {
    ...mapGetters([
      'currentSite'
    ])
  },
  data () {
    return {
      dialogShow: false,
      loading: true,
      activeName: '1'
    }
  },
  created () {
  },
  methods: {
    show () {
      this.dialogShow = true
      this.$nextTick(() => {
        this.$refs['serviceSet'].show()
        this.$refs['menufootfixedSet'].show()
      })
    },
    // 关闭弹出层
    close () {
      this.dialogShow = false
      this.activeName = '1'
    },
    saveclose () {
      this.close()
    }
  },
  components: {
    SetDesignDialog,
    ServiceSet,
    MenufootfixedSet,
    SiteCopy
  }
}
</script>

<style scoped lang="scss">
.setMore-set{
  min-height: 250px;
}
.content-set-u {
  padding:15px 0;
  .set-item-u {
    margin-bottom: 15px;
    .tit-u {
      border-left: 3px solid #258FFB;
      line-height: 1;
      padding-left: 10px;
      margin-bottom: 10px;
    }
    .content-item {
      position: relative;
      line-height: 2;
      margin-bottom: 10px;
      .btn-set-u {
        position: absolute;
        right:0;
        top: 0;
        cursor: pointer;
        &:hover {
          color:#258FFB;
        }
      }
    }
  }
}
.dialog-editor-setMore /deep/ {
  .el-checkbox__inner {
    width: 18px;
    height: 18px;
    border-color: #ccc;
    &:after {
      width: 4px;
      height: 8px;
      left: 5px;
      top: 2px;
    }
  }
  .el-checkbox__input.is-checked .el-checkbox__inner {
    border-color: #258FFB;
  }
}
</style>
